<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>
	.KEYW {color: #933;}
	.COMM {color: #bbb; font-style: italic;}
	.NUMB {color: #393;}
	.STRN {color: #393;}
	.REGX {color: #339;}
	.line {border-right: 1px dotted #666; color: #666; font-style: normal;}
	</style></head><body><pre><span class='line'>  1</span> <span class="COMM">/**
<span class='line'>  2</span>  * Returns a new grid layout.
<span class='line'>  3</span>  *
<span class='line'>  4</span>  * @class A grid layout with regularly-sized rows and columns. &lt;img
<span class='line'>  5</span>  * src="../grid.png" width="160" height="160" align="right"> The number of rows
<span class='line'>  6</span>  * and columns are determined from the array, which should be in row-major
<span class='line'>  7</span>  * order. For example, the 2&times;3 array:
<span class='line'>  8</span>  *
<span class='line'>  9</span>  * &lt;pre>1 2 3
<span class='line'> 10</span>  * 4 5 6&lt;/pre>
<span class='line'> 11</span>  *
<span class='line'> 12</span>  * should be represented as:
<span class='line'> 13</span>  *
<span class='line'> 14</span>  * &lt;pre>[[1, 2, 3], [4, 5, 6]]&lt;/pre>
<span class='line'> 15</span>  *
<span class='line'> 16</span>  * If your data is in column-major order, you can use {@link pv.transpose} to
<span class='line'> 17</span>  * transpose it.
<span class='line'> 18</span>  *
<span class='line'> 19</span>  * &lt;p>This layout defines left, top, width, height and data properties. The data
<span class='line'> 20</span>  * property will be the associated element in the array. For example, if the
<span class='line'> 21</span>  * array is a two-dimensional array of values in the range [0,1], a simple
<span class='line'> 22</span>  * heatmap can be generated as:
<span class='line'> 23</span>  *
<span class='line'> 24</span>  * &lt;pre>.add(pv.Bar)
<span class='line'> 25</span>  *   .extend(pv.Layout.grid(array))
<span class='line'> 26</span>  *   .fillStyle(pv.ramp("white", "black"))&lt;/pre>
<span class='line'> 27</span>  *
<span class='line'> 28</span>  * By default, the grid fills the full width and height of the parent panel.
<span class='line'> 29</span>  *
<span class='line'> 30</span>  * @param {array[]} arrays an array of arrays.
<span class='line'> 31</span>  * @returns {pv.Layout.grid} a grid layout.
<span class='line'> 32</span>  */</span><span class="WHIT">
<span class='line'> 33</span> </span><span class="NAME">pv.Layout.grid</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">arrays</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 34</span> </span><span class="WHIT">  </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">rows</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">arrays.length</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">cols</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">arrays</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">length</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 35</span> 
<span class='line'> 36</span> </span><span class="WHIT">  </span><span class="COMM">/** @private */</span><span class="WHIT">
<span class='line'> 37</span> </span><span class="WHIT">  </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">w</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">this.parent.width</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">cols</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 38</span> 
<span class='line'> 39</span> </span><span class="WHIT">  </span><span class="COMM">/** @private */</span><span class="WHIT">
<span class='line'> 40</span> </span><span class="WHIT">  </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">h</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">this.parent.height</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">rows</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 41</span> 
<span class='line'> 42</span> </span><span class="WHIT">  </span><span class="COMM">/* A dummy mark, like an anchor, which the caller extends. */</span><span class="WHIT">
<span class='line'> 43</span> </span><span class="WHIT">  </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">pv.Mark</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'> 44</span> </span><span class="WHIT">      </span><span class="PUNC">.</span><span class="NAME">data</span><span class="PUNC">(</span><span class="NAME">pv.blend</span><span class="PUNC">(</span><span class="NAME">arrays</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'> 45</span> </span><span class="WHIT">      </span><span class="PUNC">.</span><span class="NAME">left</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">w.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.index</span><span class="WHIT"> </span><span class="PUNC">%</span><span class="WHIT"> </span><span class="NAME">cols</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'> 46</span> </span><span class="WHIT">      </span><span class="PUNC">.</span><span class="NAME">top</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">h.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">Math.floor</span><span class="PUNC">(</span><span class="NAME">this.index</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">cols</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'> 47</span> </span><span class="WHIT">      </span><span class="PUNC">.</span><span class="NAME">width</span><span class="PUNC">(</span><span class="NAME">w</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'> 48</span> </span><span class="WHIT">      </span><span class="PUNC">.</span><span class="NAME">height</span><span class="PUNC">(</span><span class="NAME">h</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 49</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 50</span> </span></pre></body></html>